<style lang="scss" scoped>
	.product-card {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		width: 700upx;
		height: 120upx;
		margin-top: 30upx;
		margin-left: 0;
		margin-bottom: 0;
		background-color: #F9F9F9;
		border-radius: 5upx;
		

		.left {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			align-content: center;

			.pimg {
				width: 100upx;
				height: 100upx;
				border-radius: 10upx;
				margin-left: 10upx;
				background-color: #fff;
			}

			.tinfo {
				margin-left: 30upx;

				.title {
					font-size: 32upx;
				}

				.info {
					font-size: 24upx;
					color: #888;
					margin-top: 10upx;
				}
			}
		}

		.btn {
			width: 120upx;
			text-align: center;
			margin-right: 20upx;
			height: 52upx;
			border-radius: 26upx;
			line-height: 52upx;
			font-size: 28upx;
			color: #757474;
		}
	}
</style>
<template>
	<view class="product-card">
		<view class="left" @tap="gotoLink('/pages/webview?url='+constConfig.productInfoList[productId].url)">
			<image :src="constConfig.productInfoList[productId].pic" mode="aspectFit" class="pimg" />
			<view class="tinfo">
				<view class="title">{{constConfig.productList[productId]}}</view>
			</view>
		</view>
		<view class="btn" @tap="gotoLink('/pages/webview?url='+constConfig.productInfoList[productId].url)">详情</view>
	</view>
</template>

<script>
	import constConfig from "../../common/constConfig.js";
	export default {
		props: {
			product_id: Number
		},
		data() {
			return {
				// 商品相关基础配置
				constConfig
			};
		},
		computed: {
			productId() {
				if(this.product_id >= 0){
					return  this.product_id;
				}else{
					return Math.floor(Math.random() * 5);
				}
			},
		},
		methods: {
			// 跳转到动态列表页面
			gotoLink(url) {
				console.log(url);
				uni.navigateTo({
					url,
				});
			},
		},
	};
</script>
